<template>
	<div class="projects">
		<header>
			<h2>项目管理</h2>
			<div class="competition">
				<span><strong>参与赛事</strong></span>
				<el-select
					filterable
					placeholder="筛选参与相关赛事的项目"
					clearable
					v-model="filterComp"
					@change="loadProjects(1)"
				>
					<el-option
						v-for="(item) in competitions"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					/>
				</el-select>
				<el-button
					:type="filterPassedFile===false ? 'primary' : ''"
					@click="filterPassedFile=false;loadProjects(1)"
				>
					仅看需要审核项目
				</el-button>
				<el-button
					icon="el-icon-refresh"
					@click="onclickResetLoad"
				/>
			</div>
		</header>
		<div class="table-container">
			<el-table
				ref="table"
				stripe
				:data="projects"
				@sort-change="sortChange"
				@filter-change="filterChange"
			>
				<el-table-column
					label="ID"
					width="100"
					prop="id"
				/>
				<el-table-column
					label="项目标题"
					prop="name"
				/>
				<el-table-column
					label="参与赛事"
					align="center"
					prop="compName"
				/>
				<el-table-column
					label="获奖等级"
					align="center"
					width="110px"
					sortable
					:sort-method="awardLevelSort"
					:sort-orders="['descending','ascending', null]"
					prop="awardLevel.label"
				/>
				<el-table-column
					label="阅读"
					align="center"
					sortable
					:sort-orders="['descending','ascending', null]"
					prop="read"
				/>
				<el-table-column
					label="收藏"
					align="center"
					sortable
					prop="collect"
				/>
				<el-table-column
					label="项目状态"
					align="center"
					width="120"
					:filters="[{ text: '已通过', value: true }, { text: '未通过', value: false }]"
					filter-placement="bottom-end"
					:filter-multiple="false"
					:filter-method="(value, project) => project.passed === value"
					column-key="filterPassed"
					prop="passed"
				>
					<template slot-scope="scope">
						<i
							v-if="scope.row.passed"
							class="success el-icon-success"
						/>
						<i
							v-else
							class="none el-icon-error"
						/>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					align="center"
				>
					<template slot-scope="scope">
						<el-button
							size="mini"
							type="primary"
							@click="$pushTo('CompProject',{id: scope.row.id})"
						>
							审阅
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页器 -->
			<div class="pagination">
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="pageSize"
					:total="total"
					:current-page="pageNum"
					@current-change="loadProjects"
				/>
			</div>
		</div>
	</div>
</template>

<script>
import { getProjects } from '@project/api/project'
import { PRIZE_LEVELS } from '@/constants/staticData'
export default {
  route: {
    meta: {
      login: true,
      showLeft: true,
      activeName: 'CompProject',
    }
  },
  data() {
    return {
      sortBy: null,
      orderBy: null,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      filterComp: null, // 比赛筛选
      filterPassed: null, // 筛选是否已通过的项目
      filterPassedFile: null, // 仅筛选有未审核附件的项目, true代表都审核过了，false代表有未审核
      projects: [], // 项目列表
      competitions: [], // 竞赛列表
      PRIZE_LEVELS, // 获奖等级
    }
  },
  async created() {
    this.competitions = await this.$rootApp.getComps()
    this.loadProjects(1)
  },
  methods: {
    /**
     * 加载项目
     */
    async loadProjects(pageNum = this.pageNum) {
      this.$loading()
      try {
        const params = {
          pageNum,
          pageSize: this.pageSize,
          sortBy: this.sortBy,
          orderBy: this.orderBy,
          compId: this.filterComp || null,
          passed: this.filterPassed === null ? null : this.filterPassed,
          prPass: this.filterPassedFile
        }

        const { data: res } = await getProjects(params)

        this.projects = res.pageData.map(project => {
        /* 查找参与比赛 */
          const competition = this.competitions.find(item => item.id === project.compId)

          project.compName = competition ? competition.name : '新比赛'
          /* 查找获奖等级 */
          const level = this.PRIZE_LEVELS.find(item => project.awardLevel === item.value)

          project.awardLevel = level || { label: '', value: 0 }
          /* 格式化标签 */
          if (project.tags) {
            project.tags = project.tags.replace(/\s+/g, ',')
          }
          return project
        })
        this.pageNum = pageNum
        this.total = res.total
        console.log(this.projects)
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
     * 点击重置加载
     */
    onclickResetLoad() {
      this.filterComp = null
      this.filterPassed = null
      this.filterPassedFile = null
      this.loadProjects(1)
    },
    /**
		 * 获奖等级排序
		 */
    awardLevelSort(a, b) {
      return a.awardLevel.value - b.awardLevel.value
    },
    /* 排序发生改变 */
    sortChange(column) {
      /* 判断排序标志是否含. */
      const reg = /\./

      if (reg.test(column.prop)) {
        column.prop = column.prop.split('.')[ 0 ]
      }
      this.sortBy = column.order ? column.prop : null
      if (column.order) {
        this.orderBy = column.order === 'descending' ? 'desc' : 'asc'
      } else {
        this.orderBy = column.order
      }
      this.loadProjects(1)
    },
    /* 筛选改变 */
    filterChange(filters) {

      for (const key in filters) {
        const res = filters[ key ]

        if (res.length === 0) {
          this[ key ] = null
        } else {
          this[ key ] = res[ 0 ]
        }
        console.log(this[ key ])
      }
      this.loadProjects(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.projects {
  position: relative;
  padding: 20px;
  font-size: $sSmall;

  header {
    h2 {
      margin-bottom: 10px;
      color: $blue;
    }

    .competition {
      margin: 10px 10px 0 0;

      span {
        margin-right: 10px;
      }
    }

    .el-button {
      margin-left: 10px;
    }
  }

  .el-table {
    i {
      font-size: $sLarge;

      &.success {
        color: $green;
      }

      &.none {
        color: $dark3;
      }
    }
  }

  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
